<template>
  <div class="card-edit">
    <header class="edit-header">
      <el-page-header content="编辑页面" @back="$router.back()" />
    </header>
    <main class="edit-main">
      <div class="form-container">
        <div class="title">车辆信息</div>
        <div class="form">
          <el-form ref="carInfoForm" label-width="100px" :model="carInfoForm" :rules="carInfoRules">
            <el-row>
              <el-col :span="12">
                <el-form-item label="车主姓名" prop="personName">
                  <el-input v-model="carInfoForm.personName" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系方式" prop="phoneNumber">
                  <el-input v-model="carInfoForm.phoneNumber" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="车辆号码" prop="carNumber">
                  <el-input v-model="carInfoForm.carNumber" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="车辆品牌" prop="carBrand">
                  <el-input v-model="carInfoForm.carBrand" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div class="form-container">
        <div class="title">最新一次月卡缴费信息</div>
        <div class="form">
          <el-form ref="feeForm" label-width="100px" :model="feeForm" :rules="feeFormRules">
            <el-row>
              <el-col :span="10" class="date-picker">
                <el-form-item label="有效日期" class="date-picker-el" prop="payTime">
                  <el-date-picker
                    v-model="feeForm.payTime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="支付金额" prop="paymentAmount">
                  <el-input v-model="feeForm.paymentAmount" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="支付方式" prop="paymentMethod">
                  <el-select v-model="feeForm.paymentMethod" placeholder="请选择" class="select-width">
                    <el-option
                      v-for="item in payMethodList"
                      :key="item.id"
                      :value="item.id"
                      :label="item.name"
                    >
                      <!-- <span style="float: left" />
                      <span
                        style="float: right; color: #8492a6; font-size: 13px"
                      /> -->
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </main>
    <footer class="edit-footer">
      <div class="btn-container">
        <el-button @click="resetForm">重置</el-button>

        <el-button type="primary" @click="handleEditCard">确定</el-button>

      </div>

    </footer>
  </div>
</template>

<script>
import { reqGetCardById, reqUpdateCard } from '@/api/card'
// import {mapState} from 'vuex'
const validateCarNumber = (rule, value, callback) => {
  const plateNumberRegex = /^[\u4E00-\u9FA5][\da-zA-Z]{6}$/
  if (plateNumberRegex.test(value)) {
    callback()
  } else {
    callback(new Error('请输入正确的车牌号'))
  }
}
export default {
  data() {
    return {
      carInfoForm: {
        personName: '', // 车主姓名
        phoneNumber: '', // 联系方式
        carNumber: '', // 车牌号码
        carBrand: '' // 车辆品牌
      },
      carInfoRules: {
        personName: [
          {
            required: true, message: '请输入车主姓名', trigger: 'blur'
          }
        ],
        phoneNumber: [
          {
            required: true, message: '请输入联系方式', trigger: 'blur'
          }
        ],
        carNumber: [
          {
            required: true, message: '请输入车辆号码', trigger: 'blur'
          },
          {
            validator: validateCarNumber, trigger: 'blur'
          }
        ],
        carBrand: [
          {
            required: true, message: '请输入车辆品牌', trigger: 'blur'
          }
        ]
      },
      // 缴费信息表单
      feeForm: {
        payTime: [], // 支付时间
        paymentAmount: null, // 支付金额
        paymentMethod: '' // 支付方式
      },
      feeFormRules: {
        payTime: [
          {
            required: true,
            message: '请选择支付时间'
          }
        ],
        paymentAmount: [
          {
            required: true,
            message: '请输入支付金额',
            trigger: 'blur'
          }
        ],
        paymentMethod: [
          {
            required: true,
            message: '请选择支付方式',
            trigger: 'change'
          }
        ]
      },
      // 支付方式列表
      payMethodList: [
        {
          id: 'Alipay',
          name: '支付宝'
        },
        {
          id: 'WeChat',
          name: '微信'
        },
        {
          id: 'Cash',
          name: '线下'
        }
      ]
    }
  },
  computed: {
    // ...mapState('card', ['cardList'])
  },
  mounted() {
    this.getCardValues()
  },
  methods: {
    // 回显数据
    async getCardValues() {
      const id = this.$route.query.id
      const res = await reqGetCardById(id)
      console.log(res)
      const { personName, phoneNumber, carNumber, carBrand, paymentAmount, cardStartDate, cardEndDate, carInfoId, rechargeId, paymentMethod } = res.data
      this.carInfoForm = {
        personName,
        phoneNumber,
        carNumber,
        carBrand,
        carInfoId
      }
      this.feeForm = {
        payTime: [],
        paymentAmount,

        rechargeId
      }
      this.feeForm.payTime[0] = cardStartDate
      this.feeForm.payTime[1] = cardEndDate
      this.feeForm.paymentMethod = paymentMethod
    },
    async handleEditCard() {
      this.$refs.carInfoForm.validate(validate => {
        if (validate) {
          this.$refs.feeForm.validate(async validate => {
            if (validate) {
              const payload = {
                ...this.carInfoForm,
                ...this.feeForm,
                cardStartDate: this.feeForm.payTime[0],
                cardEndDate: this.feeForm.payTime[1]

              }
              delete payload.payTime
              const res = await reqUpdateCard(payload)
              console.log(res)
              this.$router.push('/parking/card')
            }
          })
        }
      })
    },
    resetForm() {}
  }
}
</script>

  <style scoped lang="scss">
.card-edit {
  background-color: #f4f6f8;
  height: 100vh;
}
.edit-main {
  background: #f4f6f8;
  padding: 20px 130px;
}
.title {
  margin-bottom: 20px;
}
.form-container {
  padding: 20px 20px;
  margin-bottom: 20px;
  background-color: #fff;
}
.form {
  text-align: center;
  padding: 30px;
}
// :deep(.date-picker) {
//     margin-right: 30px;
// }
::v-deep .date-picker {
  margin-right: 50px;
}
::v-deep .select-width {
  width: 250px;
}
.el-input__inner {
  display: flex;
  justify-content: space-between;
}
.edit-header {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 64px;
  margin-bottom: 10px;
  background-color: #fff;
}
::v-deep .el-range-separator {
  text-align: center;
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0 25px;
}
.edit-footer {

      width: 100%;
      padding: 20px 130px;
      color: #000000d9;
      font-size: 14px;
      background: #fff;
      text-align: center;
    }
</style>
